import { useAppSelector } from '@shared/lib/hooks/redux'
import { Avatars, AvatarsSize } from '@shared/ui/Avatars'
import { Title } from '@shared/ui/Title'
import { memo } from 'react'
import styles from './UserInfo.module.scss'

interface Props {
  avatarSize?: AvatarsSize
  className?: string
  fontTitle?: 'h4' | 'h5'
}
export const UserInfo = memo(({ avatarSize, fontTitle }: Props) => {
  const user = useAppSelector((state) => state.user)
  return (
    <div className={styles['user-box']}>
      <Avatars
        border
        borderWidth={2}
        color='accent-success'
        imageUrl={user?.avatar}
        size={avatarSize || 'medium'}
      />
      <div className={styles['text-wrapper']}>
        <Title tag={fontTitle}>{user?.name}</Title>
        <span className={styles['text-desc']}>{user?.occupation}</span>
      </div>
    </div>
  )
})
UserInfo.displayName = 'UserInfo'
